<!DOCTYPE>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>操作界面</title>
        <style type="text/css">
        	
            body{background:#FFFFFF;}
			.fl { float:left; }
			.fr { float:right; }
			.tcenter{text-align:center;}
            .green{color:green; font-weight:bold;}
            .red{color:red; font-weight:bold;}
            
            /* 导航 */
            .tab{ overflow: hidden; margin-bottom:5px; float: right;}
			.tab a { display: block; padding: 5px 20px; float: left; text-decoration: none; color: #333; background: #ccc; height: 18px;}
			.tab a.on{ background: #E64E3F;color: #fff;text-decoration: none;}
            
            /* 主内容 */
			table.gridtable {font-family: 微软雅黑;font-size:14px;color:#333333;border-width: 1px;border-color: #666666;border-collapse: collapse;}
			table.gridtable th {border-width: 1px;padding: 8px;border-style: solid;border-color: #666666;background-color: #dedede;}
			table.gridtable td {border-width: 1px;padding: 8px;border-style: solid;border-color: #666666;background-color: #ffffff;}
			table.gridtable img{ width:30px; height:30px;}

			/* 分页 */
			.kun_page{font-size:9pt;line-height:23px;font-family:Microsoft YaHei}.kun_page .k_p_page{position:relative}.kun_page div{float:left;margin:3px;border:1px solid #ccc;cursor:pointer;color:#333;min-width:9pt;text-align:center;padding:0 5px}.kun_page em{display:block;float:left;margin:2px}.kun_page .k_p_current{background:#ccc;color:#fff;-webkit-animation:scroll_b .3s;animation:scroll_b .3s}.kun_page .k_cl{clear:both;float:none;border:none;margin:0;padding:0;width:0;height:0}.kun_page .k_custom{display:block;float:left;margin:3px 3px 3px 20px}.kun_page .k_ipt{width:30px;height:21px;border:1px solid #ccc;text-align:center;vertical-align:middle}.kun_page .k_m{opacity:0;width:1%;height:1%;top:0;left:0;display:block;position:absolute}.kun_page .sc_l{background:-webkit-gradient(linear,0 100%,100% 100%,from(#CCCCCC),to(#645F5F));-webkit-transform:translate(-50px);-webkit-animation:scroll_k_l .3s linear;background:-ms-linear-gradient(left,#ccc 0%,#645f5f 100%);transform:translate(-50px);animation:scroll_k_l .3s linear}.kun_page .sc_r{background:-webkit-gradient(linear,0 100%,100% 100%,from(#645F5F),to(#CCCCCC));-webkit-transform:translate(50px);-webkit-animation:scroll_k_r .3s linear;background:-ms-linear-gradient(left,#ccc 0%,#645f5f 100%);transform:translate(50px);animation:scroll_k_r .3s linear}@-webkit-keyframes scroll_k_l{0%{-webkit-transform:translate(-100px);opacity:.2}0%,99%{width:200%;height:100%}99%,to{-webkit-transform:translate(-20px);opacity:0}to{width:1%;height:1%}}@-webkit-keyframes scroll_k_r{0%{-webkit-transform:translate(100px);opacity:.2}0%,99%{width:200%;height:100%}99%,to{-webkit-transform:translate(20px);opacity:0}to{width:1%;height:1%}}@keyframes scroll_k_l{0%{transform:translate(-100px);opacity:.2}0%,99%{width:200%;height:100%}99%,to{transform:translate(-20px);opacity:0}to{width:1%;height:1%}}@keyframes scroll_k_r{0%{transform:translate(100px);opacity:.2}0%,99%{width:200%;height:100%}99%,to{transform:translate(20px);opacity:0}to{width:1%;height:1%}}@-webkit-keyframes scroll_b{0%,99%{background:#fff;color:#000}to{background:#ccc;color:#fff}}@keyframes scroll_b{0%,99%{background:#fff;color:#000}to{background:#ccc;color:#fff}}
		
			/* 盒子 */		
            .box{position: fixed;width: 100%;height: 100%;background: rgba(0,0,0,0.2);display: none;}
            .box .boxContent{width: 500px;height: 500px;position: fixed;left: 50%; top: 25%;margin-left: -250px;border: 1px solid #000000; background:#FFFDFD;}
            .box .boxContent .close{ position: absolute; top:3px; right:3px;}
            .box .boxContent .txt{  position: absolute; top: 50%; left: 50%; -webkit-transform: translateX(-50%) translateY(-50%); margin-top: -20px;}
            
	    </style>
        <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
        <script>
			var kpage="",getDataType="qingdan";
			$(function(){
				
				//获取单品数据（http://grapp.qianfuzhang.com/index/json_goods/p/1）
				getdata(1,1);
				
				//tab
				$(".tab a").click(function(){
					$(".tab a").removeClass("on");
					$(this).addClass("on");
					getDataType = $(this).attr("data"); 
					getdata(1,1);
				});	
						
			});
			
			//AllSelect
			function checkAll(obj){
				$(".gridtable input[type='checkbox']").prop('checked', $(obj).prop('checked'));
			};	
			
			
			function getdata(i,s) {
				$("#tbody").html('<tr><td colspan="8" align="center">正在加载中...</td></tr>');
				if(i==1)kpage=""
				if(getDataType=="danpin"){
					$.ajax({
						 dataType: "jsonp" ,  
						 callback:'json_callback', 
						 url: "http://grapp.qianfuzhang.com/index/json_goods/p/"+i ,
						 success: function(data){
							 if(data['lists']!=""){
								danpinData(data);
							 }
						 }
					});
				}else if(getDataType=="qingdan"){
					$.ajax({
						 dataType: "jsonp" ,  
						 callback:'json_callback', 
						 url: "http://grapp.qianfuzhang.com/index/json_bills/p/"+i ,
						 success: function(data){
							 if(data['lists']!=""){
								qindanData(data);
							 }
						 }
					});
				}
				
			}
			
			function reload() {
				kpage.reload();
			}
			
			<!-- 单品操作 -->
			function danpinData(data){
				var html,total,lists;
				total = data['total'];
				if(kpage==""){
					kpage = $("#divPage").page({ dataCount: data['total'], pageChange: getdata });
				}
				lists = data['lists'];
				for(v in lists){
					html += "<tr>";
					html += '<td align="center"><input name="push" type="checkbox" data="'+v+'"></td>';
					html += '<td align="center"><img src="'+lists[v]['coverUrl']+'"></td>';
					html += '<td align="center">'+lists[v]['id']+'</td>';
					html += "<td>"+lists[v]['title']+"</td>";
					html += '<td>'+lists[v]['nodes'][0]['content']+'</td>';
					html += '<td>'+lists[v]['tags']+'</td>';
					if(lists[v]['status']==0){
						html += '<td align="center">未处理</td>';	
					}else if(lists[v]['status']==1){
						html += '<td align="center"><font class="green">操作成功</font></td>';		
					}else if(lists[v]['status']==2){
						html += '<td align="center"><font class="red">操作失败</font></td>';		
					}
					if(lists[v]['status']==1){
						html += '<td align="center"></td>';
					}else{
						html += '<td align="center"><button id="btn'+v+'" data-status="0" data=\''+encodeURIComponent(JSON.stringify(lists[v]))+'\' onclick="danpin(this)">推送</button></td>';
					}
					html += '</tr>';
				}
				$("#tbody").html(html);	
				$("#total").html(total);
			}
			
			<!-- 清单操作 -->
			function qindanData(data){
				var html,total,lists;
				total = data['total'];
				if(kpage==""){
					kpage = $("#divPage").page({ dataCount: data['total'], pageChange: getdata });
				}
				lists = data['lists'];
				for(v in lists){
					html += "<tr>";
					html += '<td align="center"><input name="push" type="checkbox" data="'+v+'"></td>';
					html += '<td align="center"><img src="'+lists[v]['coverUrl']+'"></td>';
					html += '<td align="center">'+lists[v]['id']+'</td>';
					html += "<td>"+lists[v]['title']+"</td>";
					html += '<td>'+lists[v]['nodes'][0]['content']+'</td>';
					html += '<td>'+lists[v]['tags']+'</td>';
					if(lists[v]['status']==0){
						html += '<td align="center">未处理</td>';	
					}else if(lists[v]['status']==1){
						html += '<td align="center"><font class="green">操作成功</font></td>';		
					}else if(lists[v]['status']==2){
						html += '<td align="center"><font class="red">操作失败</font></td>';		
					}
					if(lists[v]['status']==1){
						html += '<td align="center"></td>';
					}else{
						html += '<td align="center"><button id="btn'+v+'" data-status="0" data=\''+encodeURIComponent(JSON.stringify(lists[v]))+'\' onclick="qingdan(this)">推送</button></td>';
					}
					html += '</tr>';
				}
				$("#tbody").html(html);	
				$("#total").html(total);
			}
			
			function strToJson(str){ 
				var json = (new Function("return " + str))(); 
				return json; 
			} 
		</script>
    </head>
    <body>
    	
        <!-- 导航 -->
    	<div class="tab" style="">
        	<a href="javascript:;" class="" data="danpin">单品</a>
            <a href="javascript:;" class="on" data="qingdan">清单</a>
        </div>
        
        <!-- 主内容 -->
        <table width="100%" class="gridtable">
            <tr>
            	<th width="10"><input type="checkbox" onclick="checkAll(this)"/></th>
                <th width="50">封面图</th>
                <th width="50">ID</th>
                <th width="200">标题</th>
                <th width="*">内容</th>
                <th width="100">标签</th>
                <th width="100">状态</th>
                <th width="100">操作</th>
            </tr>
            <tbody id="tbody">
            	<tr>
                	<td colspan="8" align="center">正在加载中</td>
                </tr>
             </tbody> 
             <tfoot>
             	<tr>
                	<td colspan="8" align="right" style="height:30px; line-height:30px;">
                    	<button class="fl" style="height:25px;font-size:12px; line-height:25px;" onClick="bulkOperation()">批量操作</button>共<span id="total">0</span>条记录<div id="divPage" class="fr"></div>
                    </td>
                </tr>
             </tfoot>
        </table>
        
        <!-- 盒子 -->
        <div class="box">
            <div class="boxContent">
                <a href="javascript:void(0);" onclick="$('.box').hide()" class="close">关闭</a>
                <div class="txt tcenter">
                    <img src="http://img.ui.cn/data/file/3/4/3/50343.gif" width="200" height="200">
                    <p>正在操作...</p>
                </div>
            </div>
        </div>
        
	</body>
    <script type="text/javascript">
		
		var run,res,data,chkValue =[];
		
		function bulkOperation(){

			$('input[name="push"]:checked').each(function(){
				chkValue.push($(this).attr('data'));
			}); 
			if( chkValue.length==0 ){
				alert('你还没有选择任何内容！');
				return false;
			}
			box.show();
			setTimeout("run()",5000);
			run = function(){
				for(v in chkValue){
					data = $("#btn"+chkValue[v]).attr("data");
					if(getDataType=="danpin"){
						res = python.SingleProduct(data.toString());
					}else if(getDataType=="qingdan"){
						res = python.Bill(data.toString());
					}
					e = $("#btn"+chkValue[v]);
					if(res==1){
						runStatus.success(e);
					}else{
						runStatus.error(e);
					}
				}
				box.close();
			}
		}
 
		function danpin(e){
			box.show();
			setTimeout("run()",5000);
			run = function(){
				data = $(e).attr("data");
				res = python.SingleProduct(data.toString());
				if(res==1){
					runStatus.success(e);
				}else{
					runStatus.error(e);
				}
				box.close();
			}
		}
	
		function qingdan(e){
			box.show();
			setTimeout("run()",5000);
			run = function(){
				data = $(e).attr("data");
				res = python.Bill(data.toString());
				if(res==1){
					runStatus.success(e);
				}else{
					runStatus.error(e);
				}
				box.close();
			}
		}
		
		var runStatus = {
			success:function(e){
				$(e).attr("data-status",1);
				$(e).parent().prev().html('<font class="green">操作成功</font>');
			},
			error:function(e){
				$(e).attr("data-status",0);
				$(e).parent().prev().html('<font class="red">操作失败</font>');
			}
		}
		
		var box = {
			show:function(){
				$('.box').show();	
			},
			close:function(){
				$('.box').hide();
			}
		}
	
		$(function(){
            $("#tiezi").click(function(){
                alert(python.Note());
            });
		});
		
		/*
		参数config:
			dataCount:数据总数
			pageSize:页数据条数
			maxButton:页码按钮数目
			showCustom:是否能手动输入页码   
			pageChange:页变更事件
		
		参数：(i,s,c)
			i:pageIndex,当前页
			s:pageSize,页数据条数
			c:pageCount,总页数
		*/
		
		(function($){
		
		$.fn.page = function (config) {
		
			if (this.length != 1) {
				throw "k_page:如有多个page请调用多次!";
			}
			var defaults = { dataCount: 1, pageSize: 10, maxButton: 6, showCustom: true, pageChange: null }
			config = $.extend(defaults, config);
		
			if (config.maxButton <= 1) config.maxButton = 2;
			if (config.pageSize < 1) config.pageSize = 1;
			//按钮数目需偶数
			if (config.maxButton % 2 != 0)
				config.maxButton++;
		
			var pageIndex = 1, pageCount, move_kf;
		
			//初始化页数
			function initcount() {
				pageCount = config.dataCount % config.pageSize == 0 ? config.dataCount / config.pageSize : parseInt(config.dataCount / config.pageSize) + 1;
			}
			initcount();
		
			var prev = "<div class='k_p_prev'><i></i>上一页</div>", next = "<div class='k_p_next'>下一页<i></i></div>", pbody = $("<span style='display:block;float:left;overflow:hidden;'></span>"), pcustom = $("<span class='k_custom'>到第&nbsp;<span></span>&nbsp;页 </span><div class='k_btn'>确定</div>"), cl = "<div class='k_cl'></div>", pipt = $("<input class='k_ipt'>");
			this.empty().addClass("kun_page").append(prev);
			pipt.keypress(function (e) {
				if (e.which == 13) {
					topage("确定");
					return false;
				}
			}).appendTo(pcustom.children());
		
			if (config.pageChange) {
				this.unbind("click").bind("click", function (e) {
					var _t = $(e.target);
					if (_t[0].tagName == "DIV" && _t[0].className != "kun_page") {
						topage(_t.text());
					}
				});
			}
		
			//跳转页码
			function topage(text) {
		
				switch (text) {
					case "上一页":
						if (pageIndex - 1 < 1) {
							return;
						}
						pageIndex--;
						move_kf = "sc_r";
						break;
					case "下一页":
						if (pageIndex + 1 > pageCount) {
							return;
						}
						pageIndex++;
						move_kf = "sc_l";
						break;
					case "确定":
		
						if (!/^\d+$/.test(pipt.val())) {
							pipt.val("");
							return;
						}
						text = parseInt(pipt.val());
						if (text < 1 || text > pageCount) {
							pipt.val("");
							return;
						}
		
					default:
						var _pindex = parseInt(text);
						if (pageIndex == _pindex)
							return;
						move_kf = pageIndex < _pindex ? "sc_l" : "sc_r";
						pageIndex = _pindex;
						break;
				}
		
				gopageChange();
			}
		
			//页变更事件
			function gopageChange() {
				if (config.pageChange) {
					if (config.dataCount != 0) {
						config.pageChange(pageIndex, config.pageSize, pageCount);
						endloading();
					}
				}
			}
		
			//异步加载结束
			function endloading() {
				initpage();
			}
		
			//添加页码
			function initpage() {
				pbody.empty();
				var _t_maxb = config.maxButton / 2;
				//前后页码集合
				var _t_listp = [], _t_listn = [];
				var _min = 0, _max = pageCount;
		
				for (var i = 1; i <= _t_maxb; i++) {
					var _t_prev = pageIndex - i, _t_next = pageIndex + i;
					//当前页码之前的页
					if (_t_prev > 0) {
						_t_listp.push("<div class='k_p_page'>" + _t_prev + "</div>");
						if (i == _t_maxb) _min = _t_prev;
					}
					//当前页码之后的页
					if (_t_next <= pageCount) {
						_t_listn.push("<div class='k_p_page'>" + _t_next + "</div>");
						if (i == _t_maxb) _max = _t_next;
					}
				}
				//显示第一页
				if (_min > 1) pbody.append("<div class='k_p_page'>1</div>");
				//显示前 ……
				if (_min - 1 > 1) pbody.append("<em>...</em>");
		
				for (var i = _t_listp.length; i >= 0; i--) {
					pbody.append(_t_listp[i]);
				}
		
				pbody.append("<div class='k_p_page k_p_current'>" + pageIndex + "<i class='k_m " + move_kf + "'></i></div>");
		
				for (var i = 0; i < _t_listn.length; i++) {
					pbody.append(_t_listn[i]);
				}
		
				//显示后 ……
				if (pageCount - _max > 1) pbody.append("<em>...</em>");
		
				//显示最后一页
				if (_max < pageCount) pbody.append("<div class='k_p_page'>" + pageCount + "</div>");
		
			}
		
			initpage();
			gopageChange();
		
			this.append(pbody).append(next);
			if (config.showCustom)
				this.append(pcustom);
			this.append(cl);
		
			return { reload: gopageChange, pageCount: pageCount, recount: function (e) {
				//重新计算页数
				config.dataCount = e;
				pageIndex = 1;
				initcount();
				initpage();
				gopageChange();
			}
			};
		
			//console.log(_min + "*" + _max + "*" + pageCount);
		}
		
		
		})(jQuery)
    </script>
</html>